<template>
    <div>
        <h2 v-bind:title="title">Title</h2>
        <p v-if="seen">现在你看到我了</p>
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
        <input v-model="message">
    </div>
</template>

<script>
    export default {
        name: 'Test',
        data: function () {
            return {
                title: '页面加载于 ' + new Date().toLocaleString(),
                message: 'this is message',
                seen: true
            }
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    }
</script>